<!--
 * @Author: linZeJian
 * @Date: 2022-02-08 17:15:58
 * @LastEditors: linZeJian
 * @LastEditTime: 2022-05-20 17:06:04
 * @Description: 任务留言，任务文件
-->
<template>
  <div>
    <div class="size14 mb4">概要</div>
    <div
      class=""
      style="
        background-color: #fff;
        height: calc(100vh - 530px);
        overflow: hidden;
        position: relative;
      "
    >
      <div style="height: calc(100%); overflow-y: auto">
        <div
          v-if="!verifications(taskFiles)"
          class="pb50"
          style="height: calc(100%); overflow-y: auto"
        >
          <van-list
            v-model="taskFileLoading"
            :finished="taskFileFinished"
            @load="taskOnLoad"
            class="list-class"
          >
            <div v-for="(item, index) in taskFiles" :key="index">
              <div class="bgbai mb10 pt10">
                <div class="task-T2 bghui plr10 ptb10 f-base">
                  <div class="mr10">
                    <div
                      class="svg34 task-avatar-color cbai bdrd2 tcenter lh34 size10"
                      v-if="item.user.nickName"
                    >
                      {{
                        item.user.nickName.substring(
                          item.user.nickName.length - 2
                        )
                      }}
                    </div>
                  </div>
                  <div class="" style="width:86%;">
                    <p class="size12 ptb8">
                      {{ item.user.nickName }}
                    </p>
                    <div
                      v-if="
                        item.recordType == 'text' || item.recordType == 'file'
                      "
                    >
                      <!-- 文字留言 -->
                      <div
                        v-if="item.recordType == 'text'"
                        class="ptb10"
                        style="word-break: break-all"
                      >
                        {{ item.text }}
                        <span v-if="item.remindingUserIsAll == ''"></span>
                        <span v-if="item.remindingUserIsAll == 'all'"
                          >@所有人</span
                        >
                        <span v-if="item.remindingUserIsAll == 'some'">{{
                          item.remindingUsersInfoText
                        }}</span>
                      </div>
                      <!-- 文件/图片 -->
                      <div v-if="item.recordType == 'file'" class="">
                        <div v-if="item.isImage">
                          <div class="bgbai mb10 plr10 ptb10">
                            <div class="task-T2 bghui plr10 ptb10">
                              <img
                                :src="`${dowmloadApi}${item.fileKey}`"
                                style="width: 100px; height: 100px"
                                @click="openImagePreview(item.fileKey)"
                              />
                            </div>
                          </div>
                        </div>
                        <div v-else>
                          <div
                            class="bgbai mb10 plr10 ptb10"
                            @click="download(item.fileKey, false)"
                          >
                            <div class="task-T2 bghui plr10 ptb10">
                              {{ item.file.fileName }}
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div v-if="item.recordType == 'forward_msg'">
                      <div
                        v-for="(item2, index) in item.subChatRecord"
                        :key="index"
                      >
                        <div class="bgbai mb2 plr10 ptb10">
                          <div class="task-T2 bghui plr10 f-base">
                            <div class="w80">
                              <p
                                class="size12 ptb8 task-tips-color"
                                v-if="item2.user"
                              >
                                {{ item2.user.nickName }}
                              </p>
                              <p
                                class="size12 ptb8 task-tips-color"
                                v-if="!item2.user"
                              >
                                {{ item2.applicationName }}
                              </p>
                              <!-- 文字留言 -->
                              <div
                                v-if="item2.recordType == 'text'"
                                class="ptb2 pb8"
                                style="word-break: break-all"
                              >
                                {{ item2.text }}
                                <span
                                  v-if="item2.remindingUserIsAll == ''"
                                ></span>
                                <span v-if="item2.remindingUserIsAll == 'all'"
                                  >@所有人</span
                                >
                                <span
                                  v-if="item2.remindingUserIsAll == 'some'"
                                  >{{ item2.remindingUsersInfoText }}</span
                                >
                              </div>
                              <!-- 文件/图片 -->
                              <div
                                v-if="item2.recordType == 'file'"
                                class=""
                              >
                                <div v-if="item2.isImage">
                                  <div class="bgbai">
                                    <div class="task-T2 bghui">
                                      <img
                                        :src="`${dowmloadApi}${item2.fileKey}`"
                                        style="width: 100px; height: 100px"
                                        @click="openImagePreview(item2.fileKey)"
                                      />
                                    </div>
                                  </div>
                                </div>
                                <div v-else>
                                  <div
                                    class="bgbai mb10 plr10 ptb10"
                                    @click="download(item2.fileKey, false)"
                                  >
                                    <div class="task-T2 bghui plr10 ptb10">
                                      {{ item2.file.fileName }}
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="f-alignNone">
                      <div class="task-T3">{{ item.createTime }}</div>
                      <div
                        v-if="item.haveAuthorityToDelete"
                        class="task-T3 cursor"
                        style="color: #ff7777"
                        @click.stop="deleteFiles(item.id)"
                      >
                        删除
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </van-list>
          <div class="f-center ptb2 task-T3" v-if="taskFileShowTips">
            -- 没有更多数据了 --
          </div>
        </div>
        <div v-else>
          <div class="f-center ptb2 task-T3">-- 暂无相关数据 --</div>
        </div>
      </div>

      <div
        class="w100 ptb4 bdt1"
        style="position: absolute; bottom: 0; left: 0;background-color:#f9f9f9"
      >
        <div class="f-alignNone">
          <van-field
            v-model="textValue"
            type="textarea"
            rows="1"
            label
            clearable
            placeholder="点击输入"
            class="mlr2 mtb4 size12"
            size="12"
            style="min-height: 12px"
            @keyup.enter.native="sendText"
          />
          <div class="f-baseX">
            <span
              class="size12"
              style="color: #808080"
              @click="showSelectTypeDialogValue = true"
              >@</span
            >
            <van-image
              width="14"
              height="14"
              :src="require('@/assets/img/parse.png')"
              class="mlr4"
              @click="openParseImage"
            />
            <van-uploader accept :after-read="afterRead">
              <van-image
                width="14"
                height="14"
                :src="require('@/assets/img/add-folder.png')"
                class="mlr4 mt4"
              />
            </van-uploader>
          </div>
          <p class="pr10 lh34 tcenter size12" style="width: 50px" @click="sendText">
            发送
          </p>
        </div>
        <div
          v-if="verifications(taskDetailFilesPers) && selectTypeValue == 1"
          style="
            padding: 4px 10px;
            overflow-y: auto;
            height: 28px;
            word-break: break-all;
            color: #9a9a9a;
          "
          @click="showSelectTypeDialogValue = true"
        >
          {{ taskDetailFilesPersText }}
        </div>
        <div
          v-if="!verifications(taskDetailFilesPers) && selectTypeValue == 2"
          style="
            padding: 4px 10px;
            overflow-y: auto;
            height: 28px;
            word-break: break-all;
            color: #9a9a9a;
          "
          @click="openTaskFilesPersonnel"
        >
          {{ taskDetailFilesPersText }}
        </div>
      </div>
    </div>

    <!-- 截图粘贴弹窗 -->
    <div>
      <van-popup
        v-model="showParseDialogValue"
        closeable
        round
        position="bottom"
        :style="{ height: '300px' }"
        @close="closeParseImage"
      >
        <div>
          <div style="margin: auto; padding: 50px 20px 20px 20px">
            <div
              style="
                margin: auto;
                width: 100%;
                text-align: center;
                height: 180px;
              "
            >
              <img
                v-if="parseImage"
                :src="parseImage"
                style="max-height: 100%; max-width: 100%"
              />
              <div
                v-else
                style="width: 100%; height: 180px; border: 1px dashed #c5c5c5"
              >
                <div
                  style="
                    color: #a7a7a7;
                    font-size: 24px;
                    text-align: center;
                    padding-top: 40px;
                  "
                >
                  Ctrl + V 粘贴图片
                </div>
              </div>
            </div>
          </div>
          <div style="margin: auto; text-align: center">
            <van-button
              type="primary"
              size="mini"
              color="#52c41a"
              @keyup.enter.native="sendParseImage"
              @click="sendParseImage"
              style="padding: 14px 20px"
              >发送</van-button
            >
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
import { getCurrentDomain, openUrl, verification } from "@/utils/methods";
import { Notify, Dialog, ImagePreview } from "vant";
export default {
  name: "",
  components: {},
  props: { },
  data() {
    return {
      // taskKey: "",
      textValue: "",
      showDialogValue: false,
      // projectKey: "",

      taskFiles: [],
      dowmloadApi: "/filebase/api/v1/app/files/",
      fileList: [],
      taskFilePageNum: 1,
      taskFilePageSize: 10,
      taskFileLoading: false,
      taskFileFinished: false,
      taskFileShowTips: false,
      taskFileTotal: 0,

      showSelectTypeDialogValue: false,
      selectTypeValue: 0,
      taskDetailFilesPers: [],
      taskDetailFilesPersText: "",
      showParseDialogValue: false,
      parseImage: "",
    };
  },
  computed: {},
  beforeMount() {},
  created() {
  },
  mounted() {},
  methods: {

    /**
     * @description: 下载
     * @param {*} urlId
     * @param {*} isOpenNew
     * @return {*}
     */
    download(urlId, isOpenNew) {
      let url = `${getCurrentDomain()}${this.dowmloadApi}${urlId}`;
      openUrl(url, isOpenNew);
    },

    /**
     * @description: 展示图片预览界面
     * @param {*} url
     * @return {*}
     */
    openImagePreview(urlId) {
      let url = `${getCurrentDomain()}${this.dowmloadApi}${urlId}`;
      ImagePreview([url]);
    },

    /**
     * @description: 附件上传
     * @param {*} file
     * @return {*}
     */
    async afterRead(file) {
      // 此时可以自行将文件上传至服务器
      let formData = new window.FormData();
      formData.append("file", file.file);
      let res = await FilebaseUrl.uploadFiles(formData);
      file.filebaseId = res.data;
      // 处理附件
      let files = {
        fileKey: file.filebaseId,
        fileName: file.file.name,
        fileType: file.file.type,
        projectKey: this.projectKey,
        taskKey: this.taskKey,
      };
      let filesArray = [];
      filesArray.push(files);
      await uploadTaskFiles(filesArray)
        .then((res) => {
          Notify({ type: "success", message: "上传成功" });
          this.showSelectTypeDialogValue = false;
          this.initTaskFiles();
          this.getTaskFilesFunc();
        })
        .catch((err) => {
          Notify({ type: "danger", message: "上传失败" });
          this.showSelectTypeDialogValue = false;
        });
    },

    /**
     * @description: 打开粘贴窗口
     * @param {*}
     * @return {*}
     */
    openParseImage() {
      this.showParseDialogValue = true;
      //获取body对象
      var body = document.getElementsByTagName("body");
      //通过body标签绑定粘贴事件，添加监听事件
      body[0].addEventListener("paste", this.parseImageFunc);
      body[0].addEventListener("keyup", this.enterKey);
      this.parseImage = "";
    },
    closeParseImage() {
      this.showParseDialogValue = false;
      //获取body对象
      var body = document.getElementsByTagName("body");
      //通过body标签卸载监听事件
      body[0].removeEventListener("paste", this.parseImageFunc);
      body[0].removeEventListener("keyup", this.enterKey);
      this.parseImage = "";
    },

    /**
     * @description: 监听enter事件，触发图片发送
     * @param {*} event
     * @return {*}
     */
    enterKey(event) {
      console.log("event", event);
      const code = event.keyCode
        ? event.keyCode
        : event.which
        ? event.which
        : event.charCode;
      console.log("code", code);
      if (code == 13) {
        this.sendParseImage();
      }
    },

    /**
     * @description: 粘贴事件，获取剪贴板里的图片信息
     * @param {*}
     * @return {*}
     */
    parseImageFunc(e) {
      var that = this;
      //定义变量存储获取的图片内容
      var blob;
      //获取clipboardData对象
      var data = e.clipboardData || window.clipboardData;
      console.log("data :>> ", data);
      //获取图片内容
      blob = data.items[0].getAsFile();
      //判断是不是图片，最好通过文件类型判断
      var isImg = (blob && 1) || -1;
      if (isImg == -1) {
        Notify({ type: "warning", message: "粘贴对象不是图片！" });
        return;
      }
      console.log("isImg", isImg);
      var reader = new FileReader();
      if (isImg >= 0) {
        //将文件读取为 DataURL
        reader.readAsDataURL(blob);
      }
      //文件读取完成时触发
      reader.onload = function (event) {
        //获取base64流
        var base64_str = event.target.result;
        //div中的img标签src属性赋值，可以直接展示图片
        console.log("base64_str :>> ", base64_str);
        that.parseImage = base64_str;
        console.log("this.parseImage", that.parseImage);
      };
    },

    /**
     * @description: 发送粘贴图片
     * @param {*}
     * @return {*}
     */
    async sendParseImage() {
      if (this.parseImage == "") {
        Notify({ type: "danger", message: "请先粘贴截图" });
        return;
      }
      // return
      let res = await FilebaseUrl.uploadParseImage(this.parseImage);
      // 处理附件
      let files = {
        fileKey: res.data.id,
        fileName: new Date().getTime() + "",
        fileType: "image/jpeg",
        projectKey: this.projectKey,
        taskKey: this.taskKey,
      };
      let filesArray = [];
      filesArray.push(files);
      await uploadTaskFiles(filesArray)
        .then((res) => {
          Notify({ type: "success", message: "上传成功" });
          this.closeParseImage();
          this.initTaskFiles();
          this.getTaskFilesFunc();
        })
        .catch((err) => {
          Notify({ type: "danger", message: "上传失败" });
          this.closeParseImage();
        });
    },

  },
  watch: {},
};
</script>

<style scoped>
</style>
